<template>
	<view>
		<view class="container">
			<!-- <view class="navbox df jc">
				<view class="navitem" :class="{ active: nav == 0 }" @click="choosenav(0)">客户公海</view>
				<view class="navitem" :class="{ active: nav == 1 }" @click="choosenav(1)">放弃客户</view>
			</view> -->
			<view class="clientslist">
				<template v-if="nowList.total > 0">
					

						<view class="clientsitem flex-box" v-for="(item, index) in nowList.data">
							<image :src="item.user.avatar" class="icon_avatar"></image>
							<view class="flex-grow-1">
								<view class="flex-box flex-between pb20">
									<view>
										<text class="fs34 pr20">{{ item.user.nickname }}</text>
										<text class="fs24 col89">{{ item.city }}
											<text v-if="item.region">| {{ item.region }}</text>
											<text v-if="item.orther_areas">| {{ item.orther_areas }}</text>
										</text>
									</view>
									<view class="flex-box">
										<view class="fs24">{{ item.mobile_text }}</view>
									</view>
								</view>
								<view class="flex-box flex-between budget">
									<view class="col89 flex-grow-1 m-ellipsis">
										<text v-if="item.total_price_text"
											class="pr20">{{ item.total_price_text }}</text>
										<text
											v-if="item.house_search_roomnum_ids_text">{{ item.house_search_roomnum_ids_text }}</text>
									</view>
									<view class="flex-box">
										<view @tap="changeAppoint" :data-user_id="item.user_id" :data-id="item.id"
											class="add">添加</view>
									</view>
								</view>
							</view>
						</view>
					
					<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
						nomore-text="没有更多了" />
				</template>
				<template v-else>
					<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
					</u-empty>
				</template>
			</view>

		</view>
	</view>
</template>

<script>
	
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				// 列表
				nowList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
				loadStatus: 'loadmore', //加载状态
			};
		},
		onLoad: function(options) {
			this.initData();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function () {
		// }
		onReachBottom: function() {
			if (this.nowList.current_page >= this.nowList.last_page) {
			
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getnowList();
			}
		},
		methods: {
			changeAppoint(event) {
				var id = Number(event.currentTarget.dataset.id);
				var user_id = Number(event.currentTarget.dataset.user_id);
				var that = this;
				app.globalData.nowThat = this;
				var nowList = this.nowList;
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/Appoint/change_appoint', {
								id: id,
								changeStatus: 1
							},
							function(res) {
								for (let index = nowList.data.length - 1; index >= 0; index--) {
									const element = nowList.data[index];

									if (user_id == element.user_id) {
										nowList.data.splice(index, 1);
									}
								}

								that.nowList = nowList
								functions.showSuccess(res.msg,function(){
									uni.navigateTo({
										url: '/pages/member/my_clients/my_clients'
									});
								});
								
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 获取列表信息
			getnowList: function() {
				var that = this;
				var json = {};
				json.page = Number(that.nowList.current_page) + 1;

				if (json.page > 1 && that.nowList.current_page >= that.nowList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse/appoint/appoint_log_list', json, function(res) {
					var nowList = res.data;
					console.log(nowList)

					if (json.page > 1) {
						var now_nowList_data = that.nowList.data || [];
						var now_nowList_data = now_nowList_data.concat(nowList.data);
						nowList.data = now_nowList_data;
					}


					that.nowList = nowList;
					console.log(that.nowList)

				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				that.nowList.current_page = 0

				that.getnowList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbox {
		line-height: 114rpx;
		height: 114rp;
		margin: 0 40rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
	}

	.navbox .navitem {
		position: relative;
		font-size: 34rpx;
		flex: 1;
		text-align: center;
		border-bottom: 1px solid #f4f3f3;
	}

	.navbox .navitem.active {
		color: #0091ff;
	}

	.navbox .navitem.active::after {
		content: '';
		display: block;
		width: 30rpx;
		height: 6rpx;
		border-radius: 50rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
		background: #0091ff;
	}

	.clientslist {
		padding: 30rpx 40rpx 0;
	}

	.clientslist .clientsitem {
		padding: 30rpx 0;
		border-bottom: 1px solid #f4f3f3;
	}

	.clientslist .icon_avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.clientslist .icon_tel3 {
		width: 25rpx;
		height: 25rpx;
		margin-left: 17rpx;
	}

	.clientslist .remove {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0 4rpx 40rpx 0 rgba(248, 103, 56, 0.3);
	}

	.clientslist .add {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		border-radius: 10rpx;
		background: #0091ff;
		margin-left: 20rpx;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
	}

	.budget {
		height: 50rpx;
		line-height: 50rpx;
	}
</style>
